<template>
  <div class="box">
    <img class="img" :src="artInfo.picUrl" alt="" />
    <div class="r-box">
      <div class="title">{{artInfo?.title}}</div>
      <div class="content"  v-html="artInfo?.content"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  article1: number;
}>();
type TartInfo = {
  content:string;
  picUrl:string;
  title:string
}
let artInfo = ref<TartInfo>({
  content:"",
  picUrl:"",
  title:""
})
const getInfo = async() =>{
  const {data} = await useServerFetch<TartInfo>("/app-api/promotion/article/get",{
    query:{
      id:props.article1
    }
  }) as {data: TartInfo}
  if (data?.title) {
    artInfo.value = data
  }
}
onMounted(()=>{
  getInfo()
})
</script>
<style lang="stylus" scoped>
.box{
  width 1080px;
  margin 0 auto
  display flex
  justify-content flex-start
  align-items center
  .img{
      width 580px
      display block
  }
  .r-box{
    margin-left 60px
    .title{
      font-weight: 300;
      font-size: 30px;
      margin-bottom 38px
    }
    .content{
      width 392px
      font-weight: 300;
      font-size: 14px;
      color: #333333;
      line-height: 21px;
    }
  }
}
</style>
